<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .small{
            width: 1200px;
            position: relative;
            margin-top: 100px;
            margin-left: 100px;
        }
        .small img{
            position: relative;
        }
        .smallbk{
            width: 368px;
            height: 516px;
            position: relative;
        }
        .small .txt{
            width: 500px;
            height: 516px;
            position: absolute;
            top: 0px;
            left: 368px;
            background-color: chartreuse;
        }
        .big{
            width: 500px;
            height: 516px;
            position: absolute;
            left: 368px;
            top: 0px;
            overflow: hidden;
        }
        .blue{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: rgba(62, 178, 245, 0.5);
            display: none;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="small">
        <div class="smallbk">
            <img src="./金正枫.png" alt="">
            <div class="blue"></div>
        </div>
        <div class="txt">Lorem ipsum dolor sit amet cons
            ectetur, adipisicing elit. Totam necessitatibus cum debitis neque
             minima? Tempore illum suscipit impedit sed ut iure explicabo adipis
             ci cum, qui sit. Debitis, maiores? Id, nobis. lorem*20
        </div>
        <div class="big" style="display: none;">
            <img src="./金正枫 放大.png" alt="">
        </div>
    </div>
    <script>
        var blue = document.querySelector('.blue');
        var big = document.querySelector('.big').querySelector('img');
        var small = document.querySelector('.small').querySelector('.smallbk');
        small.addEventListener('mousemove',function(e){
            blue.style.display = 'block';
            big.parentNode.style.display = 'block';
            small.addEventListener('mousemove',function(e){
                blue.style.left = e.pageX - small.offsetLeft -200 + 'px';
                blue.style.top = e.pageY - small.offsetTop  -200 +'px';
                if((e.pageX - small.offsetLeft -200) <=0){
                    blue.style.left = 0 + 'px';
                }else if((e.pageX - small.offsetLeft -200)>= small.offsetWidth-blue.offsetWidth){
                    blue.style.left = small.offsetWidth-blue.offsetWidth + 'px';
                }
                if((e.pageY - small.offsetTop  -200)<= 0){
                    blue.style.top = 0 + 'px';
                }else if((e.pageY - small.offsetTop -200)>= small.offsetHeigh-blue.offsetHeigh){
                    blue.style.top = 200 + 'px';
                }
            })
        })
        small.addEventListener('mouseleave',function(){
                blue.style.display = 'none';
                big.parentNode.style.display = 'none';
        })

    </script>
</body>
</html>